<% if mobile? %>
  <div class="visible-xs products-index-mobile">
    <%= render partial: 'mobile_content' %>
    <%= render partial: 'mobile_sort_ul' %>

    <div class="product-list">
      <% @products.each do |product| %>
        <a href="<%= product_path product.id %>" class="list-item">
          <%= product_default_img product %>
          <h1 class="price">
            <span class="text-red">￥<%= product.msrp %></span>
            <span class="text-mid-line pull-right">￥<%= product.price %></span>
          </h1>
          <h1 class="title" title="<%= product.title %>">
            <%= product.title %>
          </h1>
        </a>
      <% end %>
    </div>

    <%= render partial: 'shared/common_pagination', locals: { pagination: @products} %>
  </div>
<% else %>
  <section class="hidden-xs">

    <% breadcrumb :products %>

    <div class="products-index">
      <div class="row margin-reset top-panel">
        <div class="row margin-reset category_list">
          <div class="col-xs-1 padding-reset text-center">
            <i class="icon-list-page-fenlei"></i>
            分类：
          </div>
          <div class="col-xs-11">
            <ul>
              <% @root_categories.each_with_index do |cate, index| %>
                <li class="parent-category <%= (params[:category_id].present? && getParentCategoryId(params[:category_id]) == cate.id) || (params[:category_id].blank? && index == 0) ? 'active' : '' %>">
                  <a @click="changeCategory(<%= index %>, $event)" data-index="<%= index %>">
                    <%= cate.title %>
                  </a>
                </li>
              <% end %>
            </ul>
          </div>
        </div>

        <% @root_categories.each_with_index do |cate, index| %>
          <div class="row margin-reset category_kids_list son-category" id="parent-category-<%= index %>" style="display:<%= (params[:category_id].present? && getParentCategoryId(params[:category_id]) == cate.id) || (params[:category_id].blank? && index == 0) ? 'block' : 'none' %>;">
            <div class="col-xs-offset-1 col-xs-11">
              <ul>
                <% cate.children.each do |child| %>
                  <li class="<%= child.id == params[:category_id].to_i ? 'active' : '' %>">
                    <%= link_to child.title, combine_query_params({category_id: child.id, page: 1})%>
                    <div class="triangle"></div>
                    <i class="fa fa-check fa-icon"></i>
                  </li>
                <% end %>
              </ul>
            </div>
          </div>
        <% end %>

        <div class="row margin-reset company_list">
          <div class="col-xs-1 text-center padding-reset">
            <i class="icon-list-page-pinpai"></i>
            品牌：
          </div>
          <div class="col-xs-11">
            <ul>
              <% Brand.all.each_with_index do |brand, index| %>
              <li class="<%= brand.id.to_s == params[:brand_id] ? 'active' : '' %>">
                <%= link_to brand.title, combine_query_params({brand_id: brand.id, page: 1}) %>
                <div class="triangle"></div>
                <i class="fa fa-check fa-icon"></i>
              </li>
              <% end %>
            </ul>
          </div>
        </div>
      </div>
      <div class="row margin-reset list-panel">
        <div class="row margin-reset sort-head">
          <div class="col-xs-1 padding-reset text-center">
            <i class="icon-list-page-paixu"></i>
            排序：
          </div>
          <div class="col-xs-11">
            <span class="pull-right">查询结果<%= @products.total %>个产品</span>
            <ul class="">
              <li class="<%= params[:sort].blank? ? 'active' : ''%>">
                <%= link_to combine_query_params({sort: nil}) do %>
                  综合排序
                <% end %>
              </li>
              <li class="<%= params[:sort] == 'sales-desc' ? 'active' : ''%>">
                <%= link_to combine_query_params({sort: "sales-desc"}) do %>
                  销量排序
                  <i class="icon-list-page-di"></i>
                <% end %>
              </li>
              <li class="<%= params[:sort] == 'msrp-asc' ? 'active' : ''%>">
                <%= link_to combine_query_params({sort: "msrp-asc"}) do %>
                  价格从低到高
                  <i class="icon-list-page-gao"></i>
                <% end %>
              </li>
              <li class="<%= params[:sort] == 'msrp-desc' ? 'active' : ''%>">
                <%= link_to combine_query_params({sort: "msrp-desc"}) do %>
                  价格从高到底
                  <i class="icon-list-page-di"></i>
                <% end %>
              </li>
            </ul>
          </div>
        </div>

        <div class="row margin-reset list">
          <% @products.each do |product| %>
          <div class="col-xs-3 col-all-1-5-per">
            <a href="<%= product_path product.id %>">
              <%= product_default_img product %>
            </a>
            <h4 class="text-red">
              <small class="pull-right text-grgay old-price">
                  ￥<%= product.price %>
              </small>
              ￥<%= product.msrp %>
            </h4>
            <h5 title="<%= product.title %>">
              <a class="cut-title" href="<%= product_path product.id %>">
                <%= product.title %>
              </a>
            </h5>
          </div>
          <% end %>
        </div>

        <div class="panel-footer text-center">
          <%= render partial: 'shared/common_pagination', locals: { pagination: @products} %>
        </div>

      </div>
    </div>

  </section>
<% end %>
